/**
 * 
 * 一个树形结构组件，基于 NCTree 实现，NCTree的属性设置都支持，
 * 其中有几个方法和属性，经过本组件修正和简化:
 * 
 * props.onSelect的参数，
 * 第一个参数为NCTree提供的选中条目的值的数组
 * 第二个参数为以当前选中条目为根的树结构对象, 节点数据为通过props.data传入的数据
 * 
 * props.data
 * 树结构的数据, 每一个节点必须包含key值和value值, 且key值不能重复
 * 如果有子节点, 则包含children 数组
 * 如果添加了其他字段，会在props.onSelect 的第二个参数返回，
 * 子节点内的其他参数，会将NCTreeNode支持的参数通过props传递给 NCTreeNode
 * 
 * 其他参数请参考 http://bee.tinper.org/bee-tree
 * 
*/

import React, {Component} from 'react';

import './index.less';

import {
    base
} from 'nc-lightapp-front';

const {
    NCTree
} = base;

const {
    NCTreeNode
} = NCTree;

class DepartmentTree extends Component {
    constructor(props) {
        super(props);

        this.renderChildNode = this.renderChildNode.bind(this);
        this.onSelect = this.onSelect.bind(this);
        this.getChildren = this.getChildren.bind(this);
    }

    renderChildNode(childNodes) {

        return childNodes.map((child) => {
            let children = child.children || [];
            let {
                disabled = false,
                disableCheckbox = false,
                title = '--',
                key = '-',
                isLeaf = false,
                titleClass,
                titleStyle,
                switcherClass,
                switcherStyle
            } = child;

            return (
                <NCTreeNode 
                    disabled={disabled}
                    disableCheckbox={disableCheckbox}
                    title={title}
                    key={key}
                    isLeaf={isLeaf}
                    titleClass={titleClass}
                    titleStyle={titleStyle}
                    switcherClass={switcherClass}
                    switcherStyle={switcherStyle}
                >
                    {children.length > 0 && this.renderChildNode(children)}
                </NCTreeNode> 
            );
        });
    }

    onSelect(value, ev) {
        let nodeProps = ev.node.props;
        let key = nodeProps.eventKey;
        let selectTree = this.getChildren(key, this.props.data);
        
        // 父级的onSelect方法接收两个参数
        // @param { Array[string] }: 当前选中条目的value值，跟ncTree的onSelect返回值一样
        // @param { Object }: 以当前选中条目为根的树

        this.props.onSelect && this.props.onSelect(value, {
            key: key,
            title: nodeProps.title,
            children: selectTree
        });
    }

    getChildren(value, children) {
        let result = [];

        for(let i=0, l=children.length; i<l; i++) {
            if(children[i].key === value) {
                result = Object.assign({}, children[i]);
                break;
            }
            else if(children[i].children) {
                result = this.getChildren(value, children[i].children);
            }
        }

        return result;

    }

    render() {
        const {
            data,
            onSelect,
            ...others
        } = this.props;

        return (
            <div>
                <NCTree
                    defaultExpandAll={true}
                    showLine={true}
                    onSelect={this.onSelect}
                    {...others}
                >
                    {this.renderChildNode(data)}
                </NCTree>
            </div>
        );
    }
}

export default DepartmentTree;
